
<template>
  <div class="summary-page">
          <div class="model-title-unit" v-if="unit">(单位：{{ unit }})</div>
    <el-tabs v-model="activeName">

      <el-tab-pane label="概述" name="overview">
        <el-tabs
          :tab-position="tabPosition"
          v-model="activeSubName"
          style="height: 100%"
          @tab-click="handleClick"
        >
          <el-tab-pane label="面积" name="area">
            <div><img :src="originImg" class="origin-img" /></div>
            <ul class="data-detail">
              <li>
                <div class="col-title">颗粒数量</div>
                <div class="col-content">{{ this.all_stats.region_count }}</div>
              </li>
              <li>
                <div class="col-title">均值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.area.mean) }}
                </div>
              </li>
              <li>
                <div class="col-title">标准差</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.area.std) }}
                </div>
              </li>
              <li>
                <div class="col-title">最大值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.area.max) }}
                </div>
              </li>
              <li>
                <div class="col-title">最小值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.area.min) }}
                </div>
              </li>
              <li>
                <div class="col-title">P0</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.area.P0) }}
                </div>
              </li>
              <li>
                <div class="col-title">P10</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.area.P10) }}
                </div>
              </li>
              <li>
                <div class="col-title">P50</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.area.P50) }}
                </div>
              </li>
              <li>
                <div class="col-title">P90</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.area.P90) }}
                </div>
              </li>
              <li>
                <div class="col-title">P100</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.area.P100) }}
                </div>
              </li>
            </ul>
            <histogram-scatterplot
              :histogramImg="histogramImg"
              :scatterplotImg="scatterplotImg"
              :pdf="pdf"
              @scatterplot="scatterplot"
            />
          </el-tab-pane>
          <el-tab-pane label="周长" name="perimeter">
            <ul class="data-detail">
              <li>
                <div class="col-title">颗粒数量</div>
                <div class="col-content">{{ this.all_stats.region_count }}</div>
              </li>
              <li>
                <div class="col-title">均值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.perimeter.mean) }}
                </div>
              </li>
              <li>
                <div class="col-title">标准差</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.perimeter.std) }}
                </div>
              </li>
              <li>
                <div class="col-title">最大值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.perimeter.max) }}
                </div>
              </li>
              <li>
                <div class="col-title">最小值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.perimeter.min) }}
                </div>
              </li>
              <li>
                <div class="col-title">P0</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.perimeter.P0) }}
                </div>
              </li>
              <li>
                <div class="col-title">P10</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.perimeter.P10) }}
                </div>
              </li>
              <li>
                <div class="col-title">P50</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.perimeter.P50) }}
                </div>
              </li>
              <li>
                <div class="col-title">P90</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.perimeter.P90) }}
                </div>
              </li>
              <li>
                <div class="col-title">P100</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.perimeter.P100) }}
                </div>
              </li>
            </ul>
            <histogram-scatterplot
              :histogramImg="histogramImg"
              :scatterplotImg="scatterplotImg"
              :pdf="pdf"
              @scatterplot="scatterplot"
            />
          </el-tab-pane>
          <el-tab-pane label="粒径" name="diameter">
            <ul class="data-detail">
              <li>
                <div class="col-title">颗粒数量</div>
                <div class="col-content">{{ this.all_stats.region_count }}</div>
              </li>
              <li>
                <div class="col-title">均值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.diameter.mean) }}
                </div>
              </li>
              <li>
                <div class="col-title">标准差</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.diameter.std) }}
                </div>
              </li>
              <li>
                <div class="col-title">最大值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.diameter.max) }}
                </div>
              </li>
              <li>
                <div class="col-title">最小值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.diameter.min) }}
                </div>
              </li>
              <li>
                <div class="col-title">P0</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.diameter.P0) }}
                </div>
              </li>
              <li>
                <div class="col-title">P10</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.diameter.P10) }}
                </div>
              </li>
              <li>
                <div class="col-title">P50</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.diameter.P50) }}
                </div>
              </li>
              <li>
                <div class="col-title">P90</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.diameter.P90) }}
                </div>
              </li>
              <li>
                <div class="col-title">P100</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.diameter.P100) }}
                </div>
              </li>
            </ul>
            <histogram-scatterplot
              :histogramImg="histogramImg"
              :scatterplotImg="scatterplotImg"
              :pdf="pdf"
            
              @scatterplot="scatterplot"
            />
          </el-tab-pane>
          <el-tab-pane label="外接矩形长边" name="major_axis_length">
            <ul class="data-detail">
              <li>
                <div class="col-title">颗粒数量</div>
                <div class="col-content">{{ this.all_stats.region_count }}</div>
              </li>
              <li>
                <div class="col-title">均值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.major_axis_length.mean) }}
                </div>
              </li>
              <li>
                <div class="col-title">标准差</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.major_axis_length.std) }}
                </div>
              </li>
              <li>
                <div class="col-title">最大值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.major_axis_length.max) }}
                </div>
              </li>
              <li>
                <div class="col-title">最小值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.major_axis_length.min) }}
                </div>
              </li>
              <li>
                <div class="col-title">P0</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.major_axis_length.P0) }}
                </div>
              </li>
              <li>
                <div class="col-title">P10</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.major_axis_length.P10) }}
                </div>
              </li>
              <li>
                <div class="col-title">P50</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.major_axis_length.P50) }}
                </div>
              </li>
              <li>
                <div class="col-title">P90</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.major_axis_length.P90) }}
                </div>
              </li>
              <li>
                <div class="col-title">P100</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.major_axis_length.P100) }}
                </div>
              </li>
            </ul>
            <histogram-scatterplot
              :histogramImg="histogramImg"
              :scatterplotImg="scatterplotImg"
              :pdf="pdf"
              @scatterplot="scatterplot"
            />
          </el-tab-pane>
          <el-tab-pane label="外接矩形短边" name="minor_axis_length">
            <ul class="data-detail">
              <li>
                <div class="col-title">颗粒数量</div>
                <div class="col-content">{{ this.all_stats.region_count }}</div>
              </li>
              <li>
                <div class="col-title">均值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.minor_axis_length.mean) }}
                </div>
              </li>
              <li>
                <div class="col-title">标准差</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.minor_axis_length.std) }}
                </div>
              </li>
              <li>
                <div class="col-title">最大值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.minor_axis_length.max) }}
                </div>
              </li>
              <li>
                <div class="col-title">最小值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.minor_axis_length.min) }}
                </div>
              </li>
              <li>
                <div class="col-title">P0</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.minor_axis_length.P0) }}
                </div>
              </li>
              <li>
                <div class="col-title">P10</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.minor_axis_length.P10) }}
                </div>
              </li>
              <li>
                <div class="col-title">P50</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.minor_axis_length.P50) }}
                </div>
              </li>
              <li>
                <div class="col-title">P90</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.minor_axis_length.P90) }}
                </div>
              </li>
              <li>
                <div class="col-title">P100</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.minor_axis_length.P100) }}
                </div>
              </li>
            </ul>
            <histogram-scatterplot
              :histogramImg="histogramImg"
              :scatterplotImg="scatterplotImg"
              :pdf="pdf"
              @scatterplot="scatterplot"
            />
          </el-tab-pane>
          <el-tab-pane label="长宽比" name="aspect_ratio">
            <ul class="data-detail">
              <li>
                <div class="col-title">颗粒数量</div>
                <div class="col-content">{{ this.all_stats.region_count }}</div>
              </li>
              <li>
                <div class="col-title">均值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.aspect_ratio.mean) }}
                </div>
              </li>
              <li>
                <div class="col-title">标准差</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.aspect_ratio.std) }}
                </div>
              </li>
              <li>
                <div class="col-title">最大值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.aspect_ratio.max) }}
                </div>
              </li>
              <li>
                <div class="col-title">最小值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.aspect_ratio.min) }}
                </div>
              </li>
              <li>
                <div class="col-title">P0</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.aspect_ratio.P0) }}
                </div>
              </li>
              <li>
                <div class="col-title">P10</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.aspect_ratio.P10) }}
                </div>
              </li>
              <li>
                <div class="col-title">P50</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.aspect_ratio.P50) }}
                </div>
              </li>
              <li>
                <div class="col-title">P90</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.aspect_ratio.P90) }}
                </div>
              </li>
              <li>
                <div class="col-title">P100</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.aspect_ratio.P100) }}
                </div>
              </li>
            </ul>
            <histogram-scatterplot
              :histogramImg="histogramImg"
              :scatterplotImg="scatterplotImg"
              :pdf="pdf"
              @scatterplot="scatterplot"
            />
          </el-tab-pane>
          <el-tab-pane label="球形度" name="sphericity">
            <ul class="data-detail">
              <li>
                <div class="col-title">颗粒数量</div>
                <div class="col-content">{{ this.all_stats.region_count }}</div>
              </li>
              <li>
                <div class="col-title">均值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.mean) }}
                </div>
              </li>
              <li>
                <div class="col-title">标准差</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.std) }}
                </div>
              </li>
              <li>
                <div class="col-title">最大值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.max) }}
                </div>
              </li>
              <li>
                <div class="col-title">最小值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.min) }}
                </div>
              </li>
              <li>
                <div class="col-title">P0</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.P0) }}
                </div>
              </li>
              <li>
                <div class="col-title">P10</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.P10) }}
                </div>
              </li>
              <li>
                <div class="col-title">P50</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.P50) }}
                </div>
              </li>
              <li>
                <div class="col-title">P90</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.P90) }}
                </div>
              </li>
              <li>
                <div class="col-title">P100</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.P100) }}
                </div>
              </li>
            </ul>
            <histogram-scatterplot
              :histogramImg="histogramImg"
              :scatterplotImg="scatterplotImg"
              :pdf="pdf"
              @scatterplot="scatterplot"
            />
          </el-tab-pane>
          <el-tab-pane label="形状因子A/R" name="shape_factor">
            <ul class="data-detail">
              <li>
                <div class="col-title">颗粒数量</div>
                <div class="col-content">{{ this.all_stats.region_count }}</div>
              </li>
              <li>
                <div class="col-title">均值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.shape_factor.mean) }}
                </div>
              </li>
              <li>
                <div class="col-title">标准差</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.shape_factor.std) }}
                </div>
              </li>
              <li>
                <div class="col-title">最大值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.shape_factor.max) }}
                </div>
              </li>
              <li>
                <div class="col-title">最小值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.shape_factor.min) }}
                </div>
              </li>
              <li>
                <div class="col-title">P0</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.shape_factor.P0) }}
                </div>
              </li>
              <li>
                <div class="col-title">P10</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.shape_factor.P10) }}
                </div>
              </li>
              <li>
                <div class="col-title">P50</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.shape_factor.P50) }}
                </div>
              </li>
              <li>
                <div class="col-title">P90</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.shape_factor.P90) }}
                </div>
              </li>
              <li>
                <div class="col-title">P100</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.sphericity.P100) }}
                </div>
              </li>
            </ul>
            <histogram-scatterplot
              :histogramImg="histogramImg"
              :scatterplotImg="scatterplotImg"
              :pdf="pdf"
              @scatterplot="scatterplot"
            />
          </el-tab-pane>
          <el-tab-pane label="平滑度" name="smoothness">
            <ul class="data-detail">
              <li>
                <div class="col-title">颗粒数量</div>
                <div class="col-content">{{ this.all_stats.region_count }}</div>
              </li>
              <li>
                <div class="col-title">均值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.smoothness.mean) }}
                </div>
              </li>
              <li>
                <div class="col-title">标准差</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.smoothness.std) }}
                </div>
              </li>
              <li>
                <div class="col-title">最大值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.smoothness.max) }}
                </div>
              </li>
              <li>
                <div class="col-title">最小值</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.smoothness.min) }}
                </div>
              </li>
              <li>
                <div class="col-title">P0</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.smoothness.P0) }}
                </div>
              </li>
              <li>
                <div class="col-title">P10</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.smoothness.P10) }}
                </div>
              </li>
              <li>
                <div class="col-title">P50</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.smoothness.P50) }}
                </div>
              </li>
              <li>
                <div class="col-title">P90</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.smoothness.P90) }}
                </div>
              </li>
              <li>
                <div class="col-title">P100</div>
                <div class="col-content">
                  {{ computeRound(this.all_stats.smoothness.P100) }}
                </div>
              </li>
            </ul>
            <histogram-scatterplot
              :histogramImg="histogramImg"
              :scatterplotImg="scatterplotImg"
              :pdf="pdf"
              @scatterplot="scatterplot"
            />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <ul class="float-layer">
      <li @click="linkTo('/')"><svg-icon icon-class="home" /></li>
      <li @click="linkTo('/detail')"><svg-icon icon-class="detail" /></li>
    </ul>
  </div>
</template>
 
<script>
import { stats, getImageFile, histogram, scatterplot, psd } from "@/api/index";

import { readBinaryFile, computeRound ,getQueryString} from "@/utils";
import histogramScatterplot from "@/components/histogramScatterplot";
import Cookies from "js-cookie";

export default {
  name: "index",
  data() {
    return {
      unit:"",
      scatterplotImg: "",
      histogramImg: "",
      activeName: "overview",
      activeSubName: "area",
      tabPosition: "left",
      id: "",
      originImg: "",
      all_stats: {
        area: {},
        aspect_ratio: {},
        diameter: {},
        major_axis_length: {},
        minor_axis_length: {},
        perimeter: {},
        shape_factor: {},
        smoothness: {},
        sphericity: {},
      },
      pdf: "",
      user_id:""
    };
  },
  components: { histogramScatterplot },
  watch: {},
  computed: {
    computeRound() {
      return (val, num) => {
        let n = 4;
        if (num) {
          n = num;
        }
        return val !== undefined ? computeRound(val, n) : "";
      };
    },
  },
  async created() {
 
    this.id = this.$route.query.id;
        let feishu_mobile = getQueryString("feishu_mobile")
  
    if(feishu_mobile) {
      localStorage.setItem("feishu_mobile",feishu_mobile);
    }
    let mobile = localStorage.getItem("feishu_mobile");
 
    if (mobile) {
      this.user_id = mobile.replace(/\+86/, "");
    }
    this.getImageFile();
    this.stats();

    this.histogram(this.activeSubName);
    this.scatterplot("area");
 
  },
  beforeDestroy() {},
  methods: {
    async psd(attribute) {
      if (!this.user_id) return;
      let res = await psd(this.user_id,this.id, { attribute });
      let result = await readBinaryFile(res);
      const contentType = res.type;
      const blob = new Blob([result], { type: contentType });
      const url = window.URL.createObjectURL(blob);

      this.pdf = url;
    },
    linkTo(url) {
      let router = { path: url };
      if (url !== "/") {
        router["query"] = { id: this.id };
      }
      this.$router.push(router);
    },
    getParameter() {
      this.scatterplot();
    },
    handleClick(tab) {
      this.histogram(tab.name);
      this.scatterplot("area");
      if(tab.name === "diameter") {
        this.psd(tab.name);
      } else {
        this.pdf=""
      }
  
    },
    async histogram(name) {
      if (!this.user_id) return;
      let res = await histogram(this.user_id,this.id, { attribute: name });
      let result = await readBinaryFile(res);
      const contentType = res.type;
      const blob = new Blob([result], { type: contentType });
      const url = window.URL.createObjectURL(blob);
      this.histogramImg = url;
    },
    async scatterplot(chooseParameter) {
        if (!this.user_id) return;
      let res = await scatterplot(this.user_id,this.id, {
        attribute_x: this.activeSubName,
        attribute_y: chooseParameter,
      });
      let result = await readBinaryFile(res);
      const contentType = res.type;
      const blob = new Blob([result], { type: contentType });
      const url = window.URL.createObjectURL(blob);
      this.scatterplotImg = url;
    },
    async getImageFile() {
       if (!this.user_id) return;
      let res = await getImageFile(this.user_id,this.id);
      if (res) {
        let result = await readBinaryFile(res);
        const contentType = res.type;
        const blob = new Blob([result], { type: contentType });
        const url = window.URL.createObjectURL(blob);
        this.originImg = url;
      }
    },

    async stats() {
      if (!this.user_id) return;
      let res = await stats({ task_id: this.id,user_id:this.user_id });
      this.all_stats = res["all_stats"];
      this.unit = res.unit
    },
  },
};
</script>
<style src="@/assets/summary.scss" scoped lang="scss"></style>